{% block sw_cms_el_config_form %}
<sw-tabs
    position-identifier="sw-cms-element-config-form"
    class="sw-cms-el-config-form__tabs"
    default-item="content"
>

    <template #default="{ active }">
        {% block sw_cms_el_config_form_tab_content %}
        <sw-tabs-item
            :title="$tc('sw-cms.elements.general.config.tab.content')"
            name="content"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.content') }}
        </sw-tabs-item>
        {% endblock %}

        {% block sw_cms_el_form_config_tab_options %}
        <sw-tabs-item
            v-if="element.config.type.value === 'contact'"
            :title="$tc('sw-cms.elements.general.config.tab.settings')"
            name="options"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.settings') }}
        </sw-tabs-item>
        {% endblock %}
    </template>

    <template
        #content="{ active }"
    >
        {% block sw_cms_el_form_config_content %}
        <sw-container
            v-if="active === 'content'"
            class="sw-cms-el-config-form__tab-content"
        >

            {% block sw_cms_el_form_config_content_form_type %}
            <sw-cms-inherit-wrapper
                field="type"
                :element="element"
                :label="$t('sw-cms.elements.form.config.label.type')"
            >
                <template #default="{ isInherited }">
                    <mt-select
                        v-model="element.config.type.value"
                        :options="formTypeOptions"
                        :disabled="isInherited"
                    />
                </template>
            </sw-cms-inherit-wrapper>
            {% endblock %}

            {% block sw_cms_el_form_config_content_form_title %}
            <sw-cms-inherit-wrapper
                field="title"
                :element="element"
                :label="$t('sw-cms.elements.form.config.label.title')"
            >
                <template #default="{ isInherited }">
                    <mt-text-field
                        v-model="element.config.title.value"
                        :disabled="isInherited"
                    />
                </template>
            </sw-cms-inherit-wrapper>
            {% endblock %}

            {% block sw_cms_el_form_config_content_form_confirmation_text %}
            <sw-cms-inherit-wrapper
                v-if="element.config.type.value === 'contact'"
                field="confirmationText"
                :element="element"
                :label="$t('sw-cms.elements.form.config.label.confirmationText')"
            >
                <template #default="{ isInherited }">
                    <mt-textarea
                        v-model="element.config.confirmationText.value"
                        :disabled="isInherited"
                    />
                </template>
            </sw-cms-inherit-wrapper>
            {% endblock %}
        </sw-container>
        {% endblock %}

        {% block sw_cms_el_form_config_options %}
        <sw-container
            v-else-if="active === 'options' && element.config.type.value === 'contact'"
            class="sw-cms-el-config-form__tab-options"
        >
            <sw-cms-inherit-wrapper
                field="mailReceiver"
                :element="element"
                :label="$t('sw-cms.elements.form.config.label.receiverEmail')"
            >
                <template #default="{ isInherited }">
                    <sw-tagged-field
                        v-model:value="element.config.mailReceiver.value"
                        :class="getLastMailClass"
                        name="mailReceiver"
                        placeholder="john@doe.com"
                        :disabled="isInherited"
                        @update:value="updateMailReceiver"
                    />
                </template>
            </sw-cms-inherit-wrapper>
        </sw-container>
        {% endblock %}
    </template>
</sw-tabs>
{% endblock %}
